<template>
  <button class="m-button" :class="{[`icon-${iconPosition}`]:true}" @click="$emit('click')">
    <m-icon :name="icon" class="icon" v-if="icon && !loading"></m-icon>
    <!-- class="loading icon"  加入icon 是为了loading状态 也能切换左右边样式 -->
    <m-icon name="loading" class="loading icon" v-if="loading"></m-icon>
    <!-- 用div包裹才可以添加样式 -->
    <div class="content"><slot></slot></div>
  </button>
</template>
<script>
import mIcon from './icon.vue'
  export default {
    name:'GuluButton',
    props:{
      icon:{},
      loading:{},
      iconPosition:{
        type:String,
        default:"left",
        //传参检测  不是 left或right 就返回 flase
        validator(value){
          if(value === 'left' || value === 'right') return value
        },
      }
    },
    components:{
      mIcon
    }
  };
</script>

<style lang="stylus" scoped>
  @import '~styles/theme.styl'
  @keyframes spin 
    0%
      transform rotate(0deg)
    100%
      transform rotate(360deg)
.m-button 
  font-size $font_size
  height $button_heigh
  padding 0 1em
  border-radius $border_radius
  border 1px solid $border_color
  background $button_bg
  display inline-flex
  justify-content center 
  align-items center
  vertical-align: middle;
  &:hover 
    border-color $border_color_hover
  &:active
    background $button_bg
  &:focus
    outline none  
  &.icon-right 
      > .icon 
        order 2
      > .content
        order 1
  &.icon-left 
  > .icon 
    order 1
  > .content
    order 2
  .loading
    animation spin 2s infinite linear 
</style>

